<template>
    <div class="boxContentCss">
        <!-- <div class="createBack" @click="$utilsSet.goBack($router)" > -->
        <div class="createBack" @click="goBack" >
            <svg-icon icon-class="back" /> 返回
        </div>
        <el-tabs v-model="activeName" @tab-click="handleTabsClick">
            <el-tab-pane label="公众号配置" name="first">
                <el-form ref="officialRef" :model="officialForm" label-position="right" label-width="auto">
                    <div class="zh_flex first_icon_box">
                        <el-row :gutter="20" class="width-100">
                            <el-col :span="12">
                                <el-form-item  class="width-100" prop="appId" :rules="$validate.validates({required:true,msg:'开发者ID不能为空'})">
                                    <span slot="label">
                                        开发者ID（AppID）
                                        <el-tooltip class="item" effect="dark" content="开发者ID是公众号开发识别码，配合开发者密码可调用公众号的接口能力。" placement="right">
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                    </span>
                                    <el-input class="flex-input" v-model="officialForm.appId" maxlength="50"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="width-100">
                            <el-col :span="12">
                                <el-form-item class="width-100" prop="appSecret" :rules="$validate.validates({required:true,msg:'开发者密码不能为空'})">
                                    <span slot="label">
                                        开发者密码（AppSecret）
                                        <el-tooltip class="item" effect="dark" content="开发者密码是校验公众号开发者身份的密码，具有极高的安全性。" placement="right">
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                    </span>
                                    <el-input class="flex-input" v-model="officialForm.appSecret" maxlength="50"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="width-100">
                            <el-col :span="12">
                                <el-form-item label="Token" class="width-100" prop="token" :rules="$validate.validates({required:true,msg:'Token不能为空'})">
                                    <el-input class="flex-input" v-model="officialForm.token" maxlength="32"></el-input>
                                    <div class="specialText">必须为英文或数字，长度为3-32字符。</div>
                                    <!-- <div v-show="!(regToken.test(officialForm.token))" style="font-size: 12px; color: #F56C6C;">必须为英文或数字，长度为3-32字符。</div> -->
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="width-100">
                            <el-col :span="12">
                                <el-form-item label="EncodingAESKey" class="width-100" prop="aesKey" :rules="$validate.validates({required:true,msg:'EncodingAESKey不能为空'})">
                                    <el-input class="flex-input" v-model="officialForm.aesKey" maxlength="43"></el-input>
                                    <div class="specialText">消息加密密钥由43位字符组成，可随机修改，字符范围为A-Z，a-z，0-9。</div>
                                    <!-- <div v-show="!(regAesKey.test(officialForm.aesKey))" style="font-size: 12px; color: #F56C6C;">消息加密密钥由43位字符组成，可随机修改，字符范围为A-Z，a-z，0-9。</div> -->
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="width-100">
                            <el-col :span="12">
                                <el-form-item label="《服务协议》"  prop="serve_agreement_name" :rules="$validate.validates({required:true,msg:'《服务协议》不能为空'})">
                                    <el-input disabled class="flex-input"  v-model="officialForm.serve_agreement_name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-upload
                                class="upload-demo"
                                :action="action"
                                :on-remove="(file, fileList)=>{ return handleRemove(file, fileList, 'serve_agreement') }"
                                :before-upload="(file)=>{ return handleBeforUpload(file) }"
                                :on-success="(res, file, fileList)=>{ return handleSuccess(res, file, fileList, 'serve_agreement') }"
                                :file-list="fileList_serve_agreement"
                                :on-preview="handlePreview">
                                <el-button class="ed-button ed_black-bottom">上传</el-button>
                                <span slot="tip" class="el-upload__tip">只能上传html文件，且不超过500kb!</span>
                            </el-upload>
                        </el-row>
                        <el-row :gutter="20" class="width-100">
                            <el-col :span="12">
                                <el-form-item label="《隐私协议》" prop="private_agreement_name" :rules="$validate.validates({required:true,msg:'《隐私协议》不能为空'})">
                                    <el-input disabled class="flex-input" v-model="officialForm.private_agreement_name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-upload
                                class="upload-demo"
                                :action="action"
                                :on-remove="(file, fileList)=>{ return handleRemove(file, fileList, 'private_agreement') }"
                                :before-upload="(file)=>{ return handleBeforUpload(file) }"
                                :on-success="(res, file, fileList)=>{ return handleSuccess(res, file, fileList, 'private_agreement') }"
                                :file-list="fileList_private_agreement"
                                :on-preview="handlePreview">
                                <el-button class="ed-button ed_black-bottom">上传</el-button>
                                <span slot="tip" class="el-upload__tip">只能上传html文件，且不超过500kb!</span>
                            </el-upload>
                        </el-row>

                        <!-- <el-form-item label="生成公众号底部菜单" class="width-100">
                            <el-button class="ed-button ed_black-bottom" @click="generate()">一键生成</el-button>
                            <div class="generateStyle">说明：需要开发者ID</div>
                        </el-form-item> -->
                         <el-form-item class="form_btns">
                            <el-button class="ed-button ed_black-bottom" @click="onSubmit('officialRef')" :loading="first_loading">保存</el-button>
                            <el-button class="ed-button ed_white_bottom" :disabled="!can_generate" @click="generate()">生成公众号底部菜单</el-button>
                            <div class="generateStyle">说明：需要开发者ID</div>
                        </el-form-item>
                    </div>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="支付配置" name="second">
                <el-form ref="payRef" :model="payForm" label-position="right" label-width="auto">
                    <div class="zh_flex">
                         <el-row :gutter="20" class="width-100">
                            <el-col :span="12">
                                <el-form-item label="商户号" class="width-100" prop="merchantNo" :rules="$validate.validates({required:true,msg:'商户号不能为空'})">
                                    <el-input class="flex-input" v-model="payForm.merchantNo" maxlength="50"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                         <el-row :gutter="20" class="width-100">
                            <el-col :span="12">
                                <el-form-item label="终端号" class="width-100" prop="terminalNo" :rules="$validate.validates({required:true,msg:'终端号不能为空'})">
                                    <el-input class="flex-input" v-model="payForm.terminalNo" maxlength="50"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="width-100">
                            <el-col :span="12">
                                <el-form-item label="令牌" class="width-100" prop="accessToken" :rules="$validate.validates({required:true,msg:'令牌不能为空'})">
                                    <el-input class="flex-input" v-model="payForm.accessToken" maxlength="50"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <!-- <el-form-item label="商户号" class="width-100" prop="merchantNo">
                            <el-input class="flex-input" v-model="payForm.merchantNo"></el-input>
                        </el-form-item>
                        <el-form-item label="终端号" class="width-100" prop="terminalNo">
                            <el-input class="flex-input" v-model="payForm.terminalNo"></el-input>
                        </el-form-item>
                        <el-form-item label="令牌" class="width-100" prop="accessToken">
                            <el-input class="flex-input" v-model="payForm.accessToken"></el-input>
                        </el-form-item> -->
                            <el-form-item class="form_btns">
                            <el-button class="ed-button ed_black-bottom" @click="onSubmit('payRef')" :loading="second_loading">保存</el-button>
                            <!-- <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button> -->
                        </el-form-item>
                    </div>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="短信配置" name="three">
                <el-form ref="phoneRef" :model="phoneForm" label-position="right" label-width="auto">
                    <div class="zh_flex">
                        <el-row :gutter="20" class="width-100">
                            <el-col :span="12">
                                <el-form-item label="模板ID" class="width-100" prop="codeTemplateId" :rules="$validate.validates({required:true,msg:'模板ID不能为空'})">
                                    <el-input class="flex-input" v-model="phoneForm.codeTemplateId" maxlength="20"></el-input>
                                    <div class="specialText">短信模板内容：尊敬的用户您好，您的验证码是{0}，有效时间{1}分钟，如非本人操作，请忽略本短信。</div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="width-100">
                            <el-col :span="12">
                                <el-form-item label="短信账号" class="width-100" prop="account" :rules="$validate.validates({required:true,msg:'短信账号不能为空'})">
                                    <el-input class="flex-input" v-model="phoneForm.account" maxlength="20"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row><el-row :gutter="20" class="width-100">
                            <el-col :span="12">
                                <el-form-item label="短信密码" class="width-100" prop="pwd" :rules="$validate.validates({required:true,msg:'短信密码不能为空'})">
                                    <el-input class="flex-input" v-model="phoneForm.pwd" maxlength="50"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <!-- <el-form-item label="模板ID" class="width-100" prop="codeTemplateId">
                            <el-input class="flex-input" v-model="phoneForm.codeTemplateId"></el-input>
                            <div class="specialText">短信模板内容：尊敬的用户您好，您的验证码是{0}，有效时间{1}分钟，如非本人操作，请忽略本短信。</div>
                        </el-form-item>
                        <el-form-item label="短信账号" class="width-100" prop="account">
                            <el-input class="flex-input" v-model="phoneForm.account"></el-input>
                        </el-form-item>
                        <el-form-item label="短信密码" class="width-100" prop="pwd">
                            <el-input class="flex-input" v-model="phoneForm.pwd"></el-input>
                        </el-form-item> -->
                        <el-form-item class="form_btns">
                            <el-button class="ed-button ed_black-bottom" @click="onSubmit('phoneRef')" :loading="three_loading">保存</el-button>
                            <!-- <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button> -->
                        </el-form-item>
                    </div>
                </el-form>
            </el-tab-pane>
            <!-- <el-tab-pane label="增值服务配置" name="four">
                <ApiTable :api="tableApi" ref="table" :params="queryForm">
                    <el-table-column type="index" width="80" label="序号"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="name" label="增值服务"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="status" label="状态">
                        <template slot-scope="scope">
                            {{scope.row.status == '0' ? '停用' : '启用'}}
                            <el-switch
                                :value="scope.row.status == '1' ? true : false"
                                @change="switchChange(scope.row, scope.row.status == '1' ? '0' : '1')"
                                active-color="#EED096"
                                inactive-color="#909399">
                            </el-switch>
                        </template>
                    </el-table-column> 
                </ApiTable>
            </el-tab-pane> -->
        </el-tabs>
         <EdDialog :width="'420px'" :title="'配置生效'" :showSubmitBtn="false" :showCloseBtn="false"  class="configDialog" v-if="configVisible">
           <el-result icon="success" :title="configVisible_title" :subTitle="configVisible_subTitle">
                <template slot="extra">
                    <el-button class="ed-button ed_white-bottom" @click="handleConfigCopy">复制地址</el-button>
                    <el-button class="ed-button ed_black-bottom" @click="handleConfigSave">确定</el-button>
                </template>
            </el-result>
        </EdDialog>
    </div>
</template>

<script>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import { defineComponent } from 'vue'
    import { getOfficialSet, saveOfficialSet, getPaySet, savePaySet, getPhoneSet, savePhoneSet, createMenu, incrementServiceList, openService, closeService} from "./api";
    import EdDialog from 'src/components/EdDialog.vue'
    import ApiTable from 'src/components/ApiTable.vue'
    export default defineComponent({
        name: "companyCreate",
        components: { EdCreateCard, EdDialog, ApiTable},
        data(){
            return{
                // 公众号
                officialForm:{
                    appId: '',
                    appSecret: '',
                    token: '',
                    aesKey: '',
                    serviceAgreement: '',
                    serviceAgreementName: '',
                    privacyPolicy: '',
                    privacyPolicyName: '',

                    serve_agreement_url: '',
                    serve_agreement_name: '',
                    private_agreement_url: '',
                    private_agreement_name: '',
                },
                can_generate: false, // 先保存 再 生成公众号 底部菜单
                first_loading: false,
                // 支付
                payForm:{
                    merchantNo: '',
                    terminalNo: '',
                    accessToken: '',
                    id: '',
                },
                second_loading: false,
                // 短信
                phoneForm:{
                    codeTemplateId: '',
                    account: '',
                    pwd: '',
                },
                three_loading: false,
                pickerParams:{
                    valueFormat:"yyyy-MM-dd"
                },
                disabled:false,
                isUpdate: false,
                activeName: 'first',
                // 上传
                action: '',
                fileList_serve_agreement: [],
                fileList_private_agreement: [],
                // 公众号配置生效 dialog
                configVisible: false,
                configVisible_title: '配置已保存',
                configVisible_subTitle: '',
                configVisible_url: '',
                // 增值服务
                queryForm: {
                    orgId: '',
                },
                // 英文或数字，长度为3-32字符。
                regToken: /^([\dA-z]{3,32})$/,
                // 消息加密密钥由43位字符组成，可随机修改，字符范围为A-Z，a-z，0-9。
                regAesKey: /^([\dA-z]{43})$/
            }
        },
        activated(){
            this.action = this.$baseApi + "/infra/file/upload";
            if(this.activeName=='first'){
                // 获取公众号配置
                this.getOfficialSet();
            }else if(this.activeName=='second'){
                // 获取支付配置
                this.getPaySet();
            }else if(this.activeName=='three'){
                // 获取短信配置
                this.getPhoneSet();
            }else if(this.activeName=='four'){
                // 增值服务列表
                this.$nextTick(() => {
                    this.$refs.table.load(1);
                })
            }
            this.$set(this.queryForm, 'orgId', this.$route.query.id);
        },
        deactivated(){
            this.officialForm={
                appId: '',
                appSecret: '',
                token: '',
                aesKey: '',
                serviceAgreement: '',
                serviceAgreementName: '',
                privacyPolicy: '',
                privacyPolicyName: '',

                serve_agreement_url: '',
                serve_agreement_name: '',
                private_agreement_url: '',
                private_agreement_name: '',
            }
            this.fileList_serve_agreement=[];
            this.fileList_private_agreement=[];
            this.payForm={
                merchantNo: '',
                terminalNo: '',
                accessToken: '',
                id: '',
            }
            this.phoneForm={
                codeTemplateId: '',
                account: '',
                pwd: '',
            }
            this.can_generate = false;
            this.activeName = 'first';
            this.$set(this.queryForm, 'orgId', '');
            this.first_loading = false;
            this.second_loading = false;
            this.three_loading = false;
        },
        methods:{
            tableApi: incrementServiceList,
            // tabs 切换
            handleTabsClick(tab, e){
                console.log('this.officialForm.appId', this.officialForm.appId)
                // if(tab.name=='first'&&!this.officialForm.appId){
                if(tab.name=='first'){
                    // 获取公众号配置
                    this.getOfficialSet();
                }else if(tab.name=='second'&&!this.payForm.merchantNo){
                    // 获取支付配置
                    this.getPaySet();
                }else if(tab.name=='three'&&!this.phoneForm.phoneForm){
                    // 获取短信配置
                    this.getPhoneSet();
                }else if(tab.name=='four'&&this.$refs.table.page.total==0){
                    // 增值服务列表
                    this.$nextTick(() => {
                        this.$refs.table.load(1);
                    })
                }
            },
            getOfficialSet(){
                getOfficialSet({id:this.$route.query.id}).then(response => {
                    if(response.code == 20000) {
                        if(response.data&&response.data.appId) this.can_generate = true;
                        
                        if(response.data){
                            this.officialForm = {
                                appId: response.data.appId,
                                appSecret: response.data.appSecret,
                                token: response.data.token,
                                aesKey: response.data.aesKey,
                                companyId: response.data.companyId,
                                serviceAgreement: response.data.serviceAgreement,
                                serviceAgreementName: response.data.serviceAgreementName||'服务协议.html',
                                privacyPolicy: response.data.privacyPolicy,
                                privacyPolicyName: response.data.privacyPolicyName||'隐私协议.html',

                                serve_agreement_name: response.data.serviceAgreementName || '服务协议.html',
                                private_agreement_name: response.data.privacyPolicyName || '隐私协议.html',
                            };
                            this.fileList_serve_agreement = [{ name: this.officialForm.serviceAgreementName, response:{data: response.data&&response.data.serviceAgreement}}];
                            this.fileList_private_agreement = [{ name: this.officialForm.privacyPolicyName, response:{data: response.data&&response.data.privacyPolicy}}];
                        }
                    }
                })
            },
            getPaySet(){
                getPaySet({orgId:this.$route.query.id}).then(response => {
                    if(response.code == 20000) {
                        this.payForm = {
                            merchantNo: response.data&&response.data.merchantNo,
                            terminalNo: response.data&&response.data.terminalNo,
                            accessToken: response.data&&response.data.accessToken,
                            id: response.data&&response.data.id,
                            orgId: response.data&&response.data.orgId,
                            orgName: response.data&&response.data.orgName,
                        };
                    }
                })
            },
            getPhoneSet(){
                getPhoneSet({id:this.$route.query.id}).then(response => {
                    if(response.code == 20000) {
                        this.phoneForm = {
                            codeTemplateId: response.data&&response.data.codeTemplateId,
                            account: response.data&&response.data.account,
                            pwd: response.data&&response.data.pwd,
                            companyId: response.data&&response.data.companyId,
                            // companyName: response.data&&response.data.companyName,
                        };
                    }
                })
            },
            onSubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        if(formName == 'officialRef'){
                            this.first_loading = true;
                            // 公众号设置
                            let query = this.officialForm.copy();
                            query.companyId = this.$route.query.id;
                            query['serviceAgreement'] = query['serve_agreement_url']||this.officialForm['serviceAgreement'];
                            query['serviceAgreementName'] = query['serve_agreement_name']||this.officialForm['serviceAgreementName'];
                            query['privacyPolicy'] = query['private_agreement_url']||this.officialForm['privacyPolicy'];
                            query['privacyPolicyName'] = query['private_agreement_name']||this.officialForm['privacyPolicyName'];

                            delete query['serve_agreement_url'];
                            delete query['serve_agreement_name'];
                            delete query['private_agreement_url'];
                            delete query['private_agreement_name'];
                            // console.log('form--->', query)
                            // return
                            if(!this.regToken.test(query.token)){
                                this.first_loading = false;
                                return this.$message.error({ message: 'token格式不对！', center: true })
                            }else if(!this.regAesKey.test(query.aesKey)){
                                this.first_loading = false;
                                return this.$message.error({ message: 'EncodingAESKey格式不对！', center: true })
                            }
                            saveOfficialSet(query).then(response => {
                                if(response.code == 20000) {
                                    this.disabled = false;
                                    this.first_loading = false;
                                    this.configVisible_url = response.data;
                                    this.configVisible_subTitle = '微信端地址：' +response.data;
                                    this.configVisible = true;
                                    this.can_generate = true;

                                    // this.$refs[formName].resetFields()
                                    this.$refs[formName].clearValidate()                                
                                    // this.$message.success({
                                    //     message: '保存成功',
                                    //     center: true,
                                    //     duration: 2000,
                                    // });
                                    // if(this.$route.query.type !=0){
                                    //     window.setTimeout(() => {
                                    //         this.$utilsSet.goBack(this.$router);
                                    //     }, 600)
                                    // }
                                }else {
                                    this.disabled = false
                                    this.first_loading = false;
                                }
                            }).catch(()=>{
                                this.disabled = false
                                this.first_loading = false;
                            })
                        }else if(formName == 'payRef'){
                            this.second_loading = true;
                            // 支付设置
                            let query = this.payForm.copy();
                            query.orgId = this.$route.query.id;
                            // query.orgName = '万科物业';
                            savePaySet(query).then(response => {
                                if(response.code == 20000) {
                                    this.disabled = false;
                                    this.second_loading = false;
                                    this.$message.success({
                                        message: '保存成功',
                                        center: true,
                                        duration: 2000,
                                    });
                                    // this.form.id = response.data;
                                    this.$refs[formName].resetFields()
                                    if(this.$route.query.type !=0){
                                        window.setTimeout(() => {
                                            this.$utilsSet.goBack(this.$router);
                                        }, 600)
                                    }
                                }else {
                                    this.disabled = false
                                    this.second_loading = false;
                                }
                            }).catch(()=>{
                                this.disabled = false
                                this.second_loading = false;
                            })
                        }else if(formName == 'phoneRef'){
                            this.three_loading = true;
                            // 短信设置
                            let query = this.phoneForm.copy();
                            query.companyId = this.$route.query.id;
                            // query.orgName = '万科物业';
                            savePhoneSet(query).then(response => {
                                if(response.code == 20000) {
                                    this.disabled = false;
                                    this.three_loading = false;
                                    this.$message.success({
                                        message: '保存成功',
                                        center: true,
                                        duration: 2000,
                                    });
                                    this.$refs[formName].resetFields()
                                    if(this.$route.query.type !=0){
                                        window.setTimeout(() => {
                                            this.$utilsSet.goBack(this.$router);
                                        }, 600)
                                    }
                                }else {
                                    this.disabled = false
                                    this.three_loading = false;
                                }
                            }).catch(()=>{
                                this.disabled = false
                                this.three_loading = false;
                            })
                        }
                    }
                })
            },
            // 配置生效-复制
            handleConfigCopy(){
                //创建一个input元素
                let input = document.createElement('input')
                //给input的内容复制
                input.value = this.configVisible_url
                // 在body里面插入这个元素
                document.body.appendChild(input)
                // 选中input里面内容
                input.select()
                //执行document里面的复制方法
                document.execCommand('Copy')
                // 复制之后移除这个元素
                document.body.removeChild(input)
                this.$message.success({
                    message: '复制成功',
                    duration: 2000,
                    center: true,
                })
                this.configVisible = false;
            },
            // 配置生效-确定
            handleConfigSave(){
                this.configVisible=false;
            },
            // 一键生成
            generate(){
                if(!this.officialForm.appId) return this.$message({message: '请先填写开发者ID!', type: 'warning', center: true})
                createMenu(this.officialForm.appId).then(res=>{
                     if(res.success == true) {
                        this.$message.success({
                            message: '公众号底部菜单生成成功！',
                            center: true,
                            duration: 2000,
                        });
                    }
                }).catch(()=>{
                    this.disabled = false
                })
            },
            // 服务协议，隐私协议
            handleBeforUpload(file){
                const fileType = file.name.split('.');
                const fileData = fileType.slice(-1);
                if (['html'].indexOf(fileData[0]) < 0) {
                    this.$message.error({message: '仅支持格式：.html', center: true});
                    return false
                }
                const isLt500K = file.size / 1024 < 500;
                if (!isLt500K) {
                    this.$message.error({ message: '上传文件大小不能超过 500kb!', center: true });
                }
                return isLt500K;
            },
            handleSuccess(res, file, fileList, name){
                console.log('success--->', res,fileList)
                let url, myFileList = 'fileList_'+name;
                if(res&&res.success==true){
                    url = res['data'];
                    this.$set(this.officialForm, name+'_name', file['name'])
                    this.$set(this.officialForm, name+'_url', url)
                    this[myFileList] = fileList.slice(-1);
                }
            },
            handleRemove(file, fileList, name){
                this.$set(this.officialForm, name+'_name', '')
                this.$set(this.officialForm, name+'_url', '')
            },
            handlePreview(file){
                // console.log('view--->', file.response.data)
                let url = file.response.data
                if(url) window.open(url)
            },
            // 增值服务 启用/停用
            switchChange(row, value){
                // vasType： 1.房屋租赁 2.车位租赁 3.装修申报 4.工具借用
                let vasType;
                if(row.name == '房屋租赁'){
                    vasType = 1
                }else if(row.name == '车位租赁'){
                    vasType = 2
                }else if(row.name == '装修申报'){
                    vasType = 3
                }else if(row.name == '工具借用'){
                    vasType = 4
                }
                let params = {
                    orgId: this.$route.query.id,
                    vasType,
                }
                let func = value==1 ? openService : closeService;
                func(params).then(res => {
                    if(res.code === 20000){
                        this.$message.success({
                            message: value == '1' ? '启用成功' : '停用成功',
                            duration: 2000,
                            center:true
                        })
                        this.$refs.table.load()
                    }
                })
            },
            goBack(){
                this.$refs.officialRef.resetFields()
                this.$refs.payRef.resetFields()
                this.$refs.phoneRef.resetFields()
                this.$utilsSet.goBack(this.$router)
            }
        }
    })
</script>

<style scoped lang="scss">
    :deep {
        .el-tabs{
            padding: 24px 40px !important;
            .el-form-item{
                .el-form-item__content{
                    // width: 34%;
                    .el-input{
                        input{
                            // width: 460px !important;
                            width: 100%;
                        }
                    }
                }
            }
            .el-tabs__item{
                font-size: 18px;
                color: #8b8b9b;
            }

            .first_icon_box i{
                color: #C2C2C2;
            }   
             
            .upload-demo{
                .el-upload__tip{
                    margin-left: 10px;
                    color: #C2C2C2;
                }
                .el-upload-list {
                    margin-left: 210px;
                    width: 36%;
                    padding: 10px;
                }
            }

            .el-tabs__item.is-active{
                color: #1C1C1E;
                font-weight: 500 ;
            }
            .el-tabs__item:hover{
                color: #1C1C1E;
            }
            .el-tabs__active-bar{
                background: #EED096;
                height: 4px;
            }
        }
    }
    .boxContentCss{
        position: relative;
        .createBack{
            position: absolute;
            top: 28px;
            right: 42px;
            z-index: 10;
        }
        .img_center{
            display: flex;
            align-items: center;
        }
        .form_btns{
            display: flex;
            justify-content: flex-end;
            // margin-right: 10px;
            margin-top: 30px;
        }
        .specialText{
            font-family: 'Noto Sans SC';
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            // color: #606266;
            color: #9198a5;
            margin-top: 5px;
        }
    }
    .generateStyle{
        font-family: "Noto Sans SC";
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        color: #9198a5;
        margin-top: 5px;
        text-align: center;
        margin-left: 24px;
    }
    :deep .configDialog{
        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 500;
        line-height: 22px;    
        .el-dialog__body{
            padding: 0;
            padding: 30px;
            .el-result{
                padding: 0;
                .el-result__icon .icon-success{
                    fill: #65A9A5;
                }
                .el-result__title p{
                    font-size: 14px;
                    color: #606266;
                }
                .el-result__subtitle p{
                    font-size: 14px;
                    color: #606266;
                    line-height: 25px;    
                    // margin: 10px 40px 0;
                }
            }
        }
        .el-dialog__footer{
            text-align: center;
        }
    }
</style>